<template>
  <div class="aqsczl-content" :style="scaleStyle">
    <!-- 数据资产概览 -->
    <div class="sjzcgl-content">
      <LabelTitle text="信息总览"></LabelTitle>
      <div class="gl-box">
        <div class="gl-item">
          <div class="top-info">
            <div class="label-left">
              <img class="labelimg" src="../../../assets/images/files/t1.png" />
            </div>
            <div class="value-content">
              <span class="text">企业总数</span>
              <p class="number-unit">
                <span>{{ sjzcgl[0].count || 0 }}</span> 家
              </p>
            </div>
          </div>
        </div>
        <div class="gl-item">
          <div class="top-info">
            <div class="label-left">
              <img class="labelimg" src="../../../assets/images/files/t2.png" />
            </div>
            <div class="value-content">
              <span class="text">企业预警</span>
              <p class="number-unit">
                <span>{{ sjzcgl[1].count || 0 }}</span> 家
              </p>
            </div>
          </div>
        </div>
        <div class="gl-item">
          <div class="top-info">
            <div class="label-left">
              <img class="labelimg" src="../../../assets/images/files/t3.png" />
            </div>
            <div class="value-content">
              <span class="text">待整改隐患</span>
              <p class="number-unit">
                <span>{{ sjzcgl[2].count || 0 }}</span> 项
              </p>
            </div>
          </div>
        </div>
        <div class="gl-item">
          <div class="top-info">
            <div class="label-left">
              <img class="labelimg" src="../../../assets/images/files/t4.png" />
            </div>
            <div class="value-content">
              <span class="text">累计发现隐患</span>
              <p class="number-unit">
                <span>{{ sjzcgl[3].count || 0 }}</span> 项
              </p>
            </div>
          </div>
        </div>
        <div class="gl-item">
          <div class="top-info">
            <div class="label-left">
              <img class="labelimg" src="../../../assets/images/files/t5.png" />
            </div>
            <div class="value-content">
              <span class="text">累计巡查次数</span>
              <p class="number-unit">
                <span>{{ sjzcgl[4].count || 0 }}</span> 次
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 数据变化 -->
    <div class="flexbox-top mt20">
      <div class="sjbh-content">
        <LabelTitle text="数据变化"></LabelTitle>
        <div class="time-select">
          <span
            class="btn"
            :class="{ active: currentTime == 'lastLastYear'}"
            @click="selectTime('lastLastYear')"
            >前年</span
          >
          <span
            class="btn hasborder"
            :class="{ active: currentTime == 'lastYear' }"
            @click="selectTime('lastYear')"
            >去年</span
          >
          <span
            class="btn"
            :class="{ active: currentTime == 'year' }"
            @click="selectTime('year')"
            >今年</span
          >
        </div>
        <div class="sjbh-box mt10">
          <div class="sjbh-echarts mr20">
            <barEcharts
              titleName="数据总量（条）"
              :options="sjzlOption"
            ></barEcharts>
          </div>
        </div>
      </div>
      <div class="sjbh-content">
        <LabelTitle text="安全检查日历"></LabelTitle>
        <div class="sjbh-box mt10">
          <div class="sjbh-echarts" style="padding-top: 8px">
            <el-calendar ref="calendar" v-model="currentDate">
              <template #header="{ date }">
                <div class="calendaer-header">
                  <img
                    src="../../../assets/images/files/left.png"
                    @click="selectDate('prev-month')"
                  />

                  <span @click="selectDate('today')"> {{ date }}</span>

                  <img
                    src="../../../assets/images/files/right.png"
                    @click="selectDate('next-month')"
                  />
                </div>
              </template>
              <template #date-cell="{ data }">
                <div
                  class="flexbox-top"
                  :class="data.isSelected ? 'is-selected' : ''"
                >
                  <span class="date-s">{{
                    data.day.split("-").slice(1).join("-").split("-").at(-1)
                  }}</span>

                  <div class="company-box" v-if="companylist[data.day]">
                    <!-- <span
                      class="item exlipse"
                      v-for="item in companylist[data.day].inspectionYList.split(',') ||[]"
                      :key="item"
                      >{{ item }}</span
                    > -->
                    <span
                      class="item exlipse"
                      v-for="item in companylist[data.day].inspectionNList.split(',') ||
                      []"
                      :key="item" :title="item"
                      >{{ item }}</span
                    >
                    <span
                      class="item exlipse"
                      style="background-color:gainsboro"
                      v-for="item in companylist[data.day].recheckList.split(',') || []"
                      :key="item" :title="item"
                      >{{ item }}</span
                    >
                    <!-- <span class="item exlipse">xxx公司</span> -->
                  </div>
                </div>
              </template>
            </el-calendar>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="flexbox-top" style="margin-top: 12px">
      <div class="sjbh-content-bt">
        <LabelTitle text="企业分析"></LabelTitle>
        <div class="sjbh-box-bt mt10 mr20">
          <div class="left-content">
            <div class="info-item" v-for="(item, key) in qyData.tag" :key="key">
              <span class="name">{{ item.tagLabel }}</span>
              <span class="number"
                >{{ item.count }}<snap class="unit">家</snap></span
              >
            </div>
          </div>
          <div class="sjbh-echarts">
            <pie titleName="企业分类" :options="qyData.data"></pie>
          </div>
        </div>
      </div>
      <!-- <div class="sjbh-content" style="width: 25%">
        <LabelTitle text="复查临期"></LabelTitle>
        <div class="sjbh-box mt10">
          <div class="sjbh-echarts mr20 nopadding">
            <div class="scroll">

              <div
                class="infoitem"
                v-for="(item, index) in fclist.nearRecheckList"
                :class="{
                  pink: index == 1,
                  org: index == 2,
                  green: index == 3,
                }"
                :key="index"
              >
                <span class="left-text">
                  <span class="date">{{ item.dateLable }}</span>
                  <span class="name">{{ item.enterpriseNameCn }}</span>
                </span>

                <span class="status"
                  ><span class="num">{{ item.issuesCount }}</span
                  >天到期</span
                >
              </div>
            </div>
          </div>
        </div>
      </div> -->
      <div class="sjbh-content" style="width: 50%">
        <LabelTitle text="最近巡查"></LabelTitle>
        <div class="sjbh-box mt10">
          <div class="sjbh-echarts mr20 nopadding">
            <div class="scroll">
              <div class="infoitem" v-for="(item, index) in fclist" :key="index">
                <span class="left-text">
                   <span class="date">{{ item.dateLable }}</span>
                  <span class="name">{{ item.enterpriseNameCn }}</span>
                </span>

                <span class="status"><span class="num">{{item.issuesCount}}</span>项目</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script  setup>
import { ScaleMin } from "@/utils/screen-scale-mixin.js";
const { scaleStyle } = ScaleMin();
import LabelTitle from "@/components/labeltitle.vue";
import { onMounted } from "vue";
import pie from "./pie.vue";
import barEcharts from "./bar.vue";
import { time } from "echarts";
import dayjs from "dayjs";

import {
  getreportListTop,
  getinspectissuesbar,
  inspectissuescalendar,
  enterpriseanalysis,
  getFcListApi,
} from "@/api/dazx.js";
// import { get } from "ol/proj";

let sjloption = ref([]);
let ccoption = ref([]);
let sjzlOption = ref([]);
let cczlOption = ref([]);
onMounted(() => {
  getData();
  // getData2();
  getData3();
  getrl();
  getqyfx();
  getfclist();
});

// 获取数据资产
let sjzcgl = ref([
  {
    dataItem: "企业总数",
    count: 0,
    unitName: "家",
  },
  {
    dataItem: "企业预警",
    count: 0,
    unitName: "家",
  },
  {
    dataItem: "待整改隐患",
    count: 0,
    unitName: "项",
  },
  {
    dataItem: "累计发现隐患",
    count: 0,
    unitName: "项",
  },
  {
    dataItem: "累计查询次数",
    count: 0,
    unitName: "次",
  },
]);
const getData = async () => {
  try {
    let { data } = await getreportListTop();
    sjzcgl.value = data;
  } catch (error) {
    console.log(error);
  }
};

// 数组组成
let amount = ref([
  {
    belongModule: "原始库",
    totalCount: "0",
    increaseRate: 0,
  },
  {
    belongModule: "主题库",
    totalCount: "0",
    increaseRate: 0,
  },
  {
    belongModule: "专题库",
    totalCount: "0",
    increaseRate: 0,
  },
]);
let storage = ref([
  {
    belongModule: "原始库",
    totalCount: "0",
    increaseRate: 0,
  },
  {
    belongModule: "主题库",
    totalCount: "0",
    increaseRate: 0,
  },
  {
    belongModule: "专题库",
    totalCount: "0",
    increaseRate: 0,
  },
]);

let qyfloption = ref([]);
const getData2 = async () => {
  try {
    // let { data } = await makeup();
    // amount.value = data.amount;
    // storage.value = data.storage;
    qyfloption.value = [
      {
        name: "原始库",
        value: 12222,
        itemStyle: {
          //   opacity: 0.5,
          color: "#2D9BFC",
        },
      },

      {
        name: "主题库",
        value: 12222,
        itemStyle: {
          //   opacity: 0.5,
          color: "#28BC59",
        },
      },
      {
        name: "专题库",
        value: 12222,
        itemStyle: {
          //   opacity: 0.5,
          color: "#FFCF37",
        },
      },
    ];
    // ccoption.value = [
    //   {
    //     name: "原始库",
    //     value: parseFloat(storage.value[0].totalCount) || 0,
    //     itemStyle: {
    //       //   opacity: 0.5,
    //       color: "#2D9BFC",
    //     },
    //   },

    //   {
    //     name: "主题库",
    //     value: parseFloat(storage.value[1].totalCount) || 0,
    //     itemStyle: {
    //       //   opacity: 0.5,
    //       color: "#28BC59",
    //     },
    //   },
    //   {
    //     name: "专题库",
    //     value: parseFloat(storage.value[2].totalCount) || 0,
    //     itemStyle: {
    //       //   opacity: 0.5,
    //       color: "#FFCF37",
    //     },
    //   },
    // ];
  } catch (error) {
    console.log(error);
  }
};

let currentTime = ref('lastYear');
const selectTime = (time) => {
  currentTime.value = time;
  getData3();
};
const getData3 = async () => {
  try {
    let { data } = await getinspectissuesbar({
      dimension: currentTime.value,
    });
    let newVal = {
      xAxis: [],
      yh: [],
      zg: [],
      pc: [],
    };

    data.map((item) => {
      newVal.xAxis.push(item.inspectionMon);
      newVal.yh.push(item.issueCount);
      newVal.zg.push(item.rectificationCount);
      newVal.pc.push(item.inspectionTimes);
    });
    sjzlOption.value = newVal;
  } catch (error) {
    console.log(error);
  }
};

// 日历
const calendar = ref();
let currentDate = ref("");
const selectDate = (val) => {
  if (!calendar.value) return;

  calendar.value.selectDate(val);
  //  alert(currentDate.value)
  getrl(currentDate.value);
};

let companylist = ref({});

const getrl = async (date) => {
  try {
    let { data } = await inspectissuescalendar({
      queryMonth: date
        ? dayjs(date).format("YYYY-MM")
        : dayjs().format("YYYY-MM"),
    });
    // companylist.value = data;
    let dateObj = {};
    data.map((item) => {
      dateObj[item.inspectionDate] = {
        inspectionYList: item.inspectionYList||'',
        inspectionNList: item.inspectionNList||'',
        recheckList: item.recheckList||'',
      };
    });
    companylist.value = dateObj;
    console.log('11111',dateObj)
  } catch (e) {
    console.error(e);
  }
};

let qyData = ref({
  tag: [],
  data: [],
});

const getqyfx = async () => {
  try {
    let { data } = await enterpriseanalysis();
    qyData.value.tag = data.tagStat;
    qyData.value.data = data.industryCategoryStat;
    let arr = [];
    let color = [
      "#ffcf37",
      "#ff7237",
      "#2d9bfc",
      "#27bc58",
      "#8451c4",
      "#ffcf37",
      "#ff7237",
      "#2d9bfc",
      "#27bc58",
      "#8451c4",
    ];
    data.industryCategoryStat.map((item, index) => {
      arr.push({
        name: item.icName,
        value: item.count,
        itemStyle: {
          color: color[index],
        },
      });
    });
    qyData.value.data = arr;
  } catch (error) {
    console.log(error);
  }
};

// const fclist = ref({
//   latestInspectList: [],
//   nearRecheckList: [],
// });
const fclist = ref([]);
const getfclist = async () => {
  try {
    let { data } = await getFcListApi();
    fclist.value = data.latestInspectList;
  } catch (e) {
    console.error(e);
  }
};
</script>
<style lang="scss" scoped>
.aqsczl-content {
  width: 100%;
  height: 100%;
  // border: 1px solid red;
  .sjzcgl-content {
    width: 100%;
    .gl-box {
      margin-top: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .gl-item {
        width: 19%;
        height: 145px;
        padding: 29px 18px 20px 15px;
        &:nth-child(1) {
          background: url("../../../assets/images/gl1.png");
          background-size: 100% 100%;
        }
        &:nth-child(2) {
          background: url("../../../assets/images/gl5.png");
          background-size: 100% 100%;
        }
        &:nth-child(3) {
          background: url("../../../assets/images/gl2.png");
          background-size: 100% 100%;
        }
        &:nth-child(4) {
          background: url("../../../assets/images/gl3.png");
          background-size: 100% 100%;
        }
        &:nth-child(5) {
          background: url("../../../assets/images/gl4.png");
          background-size: 100% 100%;
        }
        .top-info {
          display: flex;
          align-items: top;
          justify-content: flex-start;
          .label-left {
            display: flex;
            align-items: center;
            .labelimg {
              width: 88px;
              height: 88px;
            }
            .text {
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 16px;
              color: #ffffff;
              line-height: 22px;
              letter-spacing: 1px;
              text-align: left;
              font-style: normal;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .value-content {
            font-family: YouSheBiaoTiHei;
            font-size: 30px;
            color: #ffffff;
            line-height: 39px;
            letter-spacing: 3px;
            text-align: left;
            font-style: normal;
            white-space: nowrap;
            .text {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 18px;
              color: #ffffff;
              line-height: 25px;
              letter-spacing: 1px;
            }
            .number-unit {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 18px;
              color: #ffffff;
              line-height: 25px;
              span {
                font-family: YouSheBiaoTiHei;
                font-size: 35px;
                color: #ffffff;
                line-height: 46px;
                letter-spacing: 3px;
                text-align: left;
              }
            }
          }
        }
      }
    }
  }
  .sjzc-content {
    width: 100%;
    margin-top: 10px;
    .sjzc-box {
      display: flex;
      align-items: center;
      margin-top: 10px;
      .sj-box {
        display: flex;
        align-items: center;
        width: 50%;
        flex-shrink: 0;
        .echartsOne {
          flex-shrink: 0;
          width: 390px;
          height: 290px;
          border-radius: 10px;
          background: #fff;
          overflow: hidden;
        }
        .info-dom {
          height: 290px;
          border-radius: 10px;
          flex: 1;
          .info-dom-item {
            padding: 20px 44px 15px 30px;
            width: 100%;
            height: 90px;
            display: flex;
            align-items: center;
            box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
            border-radius: 12px;
            background: #ffffff;
            &:hover {
              background: url("../../../assets/images/hoverbg.png");
              background-size: 100% 100%;
              p,
              span {
                color: #fff !important;
              }
            }
            .right-info {
              flex: 1;
              border-left: 1px solid rgba(151, 151, 151, 0.21);
              padding-left: 18px;
              .info-title {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                line-height: 20px;
                letter-spacing: 1px;
              }
              .btoom-text {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 12px;
                .num {
                  font-family: YouSheBiaoTiHei;
                  font-size: 18px;
                  color: #333333;
                  line-height: 23px;
                  letter-spacing: 1px;
                }
                .upinfo {
                  display: flex;
                  align-items: top;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 12px;
                  color: #999999;
                  line-height: 17px;
                  letter-spacing: 1px;
                  img {
                    height: 16px;
                  }
                }
              }
            }
            .img {
              width: 32px;
              height: 32px;
              margin-right: 20px;
            }
          }
        }
      }
    }
  }
  .sjbh-content {
    width: 50%;
    position: relative;
    .time-select {
      position: absolute;
      right: 20px;
      top: -10px;
      width: 210px;
      height: 28px;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .btn {
        background: #fff;
        display: inline-block;
        width: 70px;
        height: 28px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 12px;
        color: #2263bf;
        line-height: 28px;
        letter-spacing: 1px;
        text-align: center;
        cursor: pointer;
        &.active {
          background: #2263bf;
          color: #ffffff;
        }
        &.hasborder {
          border-left: 1px solid rgba(151, 151, 151, 0.21);
          border-right: 1px solid rgba(151, 151, 151, 0.21);
        }
      }
    }
    .sjbh-box {
      display: flex;
      align-items: center;
      .sjbh-echarts {
        padding: 25px 50px 0px 45px;
        width: 100%;
        height: 310px;
        background: #fff;
        background: #ffffff;
        box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
        border-radius: 12px;
      }
    }
  }
  .sjbh-content-bt {
    width: 50%;
    position: relative;
    padding-right: 20px;
    .sjbh-box-bt {
      padding: 20px;
      width: 100%;
      height: 310px;
      display: flex;
      align-items: top;
      background: #ffffff;
      box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
      border-radius: 12px;
      .left-content {
        width: 50%;
        height: 100%;
        overflow: auto;
        display: flex;
        align-items: top;
        flex-wrap: wrap;
        gap: 16px;
        .info-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: calc(50% - 16px);
          height: 40px;
          background: #f6f9ff;
          border-radius: 8px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #999999;
          line-height: 40px;
          padding: 0 14px;
          .number {
            font-family: YouSheBiaoTiHei;
            font-size: 18px;
            color: #333333;
          }
          .unit {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
            line-height: 40px;
          }
        }
      }
      .sjbh-echarts {
        width: 50%;
      }
    }
  }
  .scroll {
    height: 100%;
    padding: 0px !important;
    overflow: auto;
  }
  .nopadding {
    padding: 20px !important;
  }
  .infoitem {
    height: 48px;
    background: #f6f9ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 0 16px 0 20px;
    &.pink {
      background: #f8e1ff;
    }
    &.org {
      background: #ffece3;
    }
    &.green {
      background: #f2ffec;
    }
    .left-text {
      .date {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        line-height: 20px;
        margin-right: 12px;
      }
      .name {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 14px;
        color: #000000;
      }
    }
    .status {
      text-align: right;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      line-height: 20px;
      .num {
        color: #fa6400;
      }
    }
  }
  .date-s {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #000000;
    margin-right: 8px;
  }
  .company-box {
    overflow: auto;
    flex: 1;
    height: 36px;
    .item {
      display: block;
      height: 16px;
      background: #fc7338;
      border-radius: 8px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #ffffff;
      line-height: 12px;
      text-align: center;
      margin-bottom: 2px;
    }
  }
}
</style>
